<style lang="scss" scoped>
.rank_box {
  display: flex;
  justify-content: center;
  align-items: center;
  .table_rank {
    // display: inline-block;
    width: 24px;
    height: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    border-radius: 2px;
  }
}
</style>

<template>
  <div class="rank_box">
    <div :style="rankStyle" class="table_rank">{{ rank + 1 }}</div>
  </div>
</template>

<script setup>
import { computed } from "vue";
const rankStyleMap = {
  0: { color: "#fff", bgColor: "#fb3e3d" },
  1: { color: "#fff", bgColor: "#fc794c" },
  2: { color: "#fff", bgColor: "#fd9c46" },
  3: { color: "#fff", bgColor: "#a2a6aa" },
};
const props = defineProps({
  rank: {
    type: Number,
    default: 0,
  },
});
const rankStyle = computed(() => {
  let { rank } = props;
  if (rank > 3 && rank < 10) rank = 3;
  if (rank <= 3) {
    const { color, bgColor } = rankStyleMap[rank];
    return { color, background: bgColor };
  }
  return { color: "#333" };
});
</script>